<template>
  <!-- 平台版本维护 -->
  <div class="video-list-wrap">
    <!-- 查询条件 -->
    <!-- 查询条件 -->
    <el-row type="flex" justify="space-between">
      <el-form :inline="true" :model="searchForm" class="demo-form-inline" @submit.native.prevent>
        <el-form-item>
          <el-select filterable v-model="searchForm.orgIds" @change="search" placeholder="请选择业主单位">
            <el-option
              v-for="item in ucOrgList"
              :key="item.organizationId"
              :label="item.shortName"
              :value="item.organizationId">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button class="form-search-btn" type="primary" @click="search">查询</el-button>
        </el-form-item>
      </el-form>
      <div class="more-btns">
        <el-button type="primary" @click="editDetail(0,{})">新增</el-button>
      </div>
    </el-row>

    <!-- 数据列表 -->
    <el-table
      v-loading="loading"
      ref="videoConfigTableList"
      :data="tableData"
      style="width: 100%">
      <el-table-column label="序号" type="index" prop="id"  width="100"></el-table-column>
      <el-table-column label="配置名称" prop="authName"></el-table-column>
      <el-table-column label="设备类型" prop="equiptTypeName"></el-table-column>
      <el-table-column label="userId" prop="userId"></el-table-column>
      <el-table-column label="电话号码" prop="phoneNumber"></el-table-column>
      <el-table-column label="appKey" prop="appKey"></el-table-column>
      <el-table-column label="secretKey" prop="secretKey"></el-table-column>
      <el-table-column label="操作" width="150">
        <template slot-scope="scope">
          <el-button @click="editDetail(1,scope.row)" type="text" size="small">编辑</el-button>
          <span class="dividing-line">|</span>
          <el-button @click="delAuth(scope.row)" type="text" size="small">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 编辑 -->
    <el-dialog
      :close-on-click-modal="false"
      :title="editTitle"
      width="600px"
      top='15vh'
      v-if="dialogEditInfo"
      :visible.sync="dialogEditInfo"
      @close="closeEditInfo"
      v-dialogDrag>
      <video-config-info :orgId="searchForm.orgIds" :videoInfo="editVideoConfigInfo" :closeFun="closeEditInfo"></video-config-info>
    </el-dialog>
  </div>
</template>
<style>
  .demo-table-expand {
    font-size: 0;
  }
  .demo-table-expand label {
    width: 100px;
    color: #99a9bf;
  }
  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 100%;
  }
</style>
<script>
  import { getOrgList} from '@/api/org'
  import { getAuth, delAuth } from '@/api/sysConfig'
  import videoConfigInfo from '../Dialog/VideoConfigInfo'
  export default {
    name: 'PlatVersionList',
    // 引入子组件
    components: {
      videoConfigInfo
    },
    data() {
      return {
        // 平台名称选项
        ucOrgList: [],
        editTitle: "新增",
        dialogEditInfo: false,
        pageLoading: false,
        loading: false,
        // 列表数据
        tableData: [],
        // 搜索条件
        searchForm: {
          orgIds: '',
          equiptType: 0
        },
      }
    },
    created() {//入口
      let that = this
      // 获取业主单位信息
      getOrgList({
      }).then(res => {
        if(res.status = 200) {
          that.ucOrgList = res.data.concat()
          if(that.ucOrgList.length > 0) {
            that.searchForm.orgIds = that.ucOrgList[0].organizationId
          }
        }
        // 加载列表
        that.getTableData()
      })
    },
    methods: {
      // 获取列表数据
      getTableData(pageIndex, pageSize) {
        let that = this
        that.loading = true
        if (pageIndex) {
          that.currentPage = pageIndex
        }
        if (pageSize) {
          that.pageSize = pageSize
        }
        let parames = {
          organizationId: that.searchForm.orgIds,
          equiptType: 0
        }
        // 获取列表信息
        getAuth(parames).then(res => {
          that.tableData = res.data
          that.loading = false
        })
      },
      search() {
        this.getTableData(1)
      },

      // 编辑
      editDetail(type, row) {
        let that = this
        if(type==0){
          that.editTitle = "新增"
        }else{
          that.editTitle = "编辑"
        }
        if(row) {
          that.editVideoConfigInfo = row
          that.dialogEditInfo = true
        }
      },
      // 关闭编辑弹框
      closeEditInfo(flag) {
        let that = this
        that.dialogEditInfo = false
        if(flag) {
          this.getTableData(this.editVideoConfigInfo.id?'':1)
        }
      },
      // 删除
      delAuth(row) {
        let that = this
        if (row) {
          that.$confirm('确定要删除吗?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
            roundButton: true
          }).then(() => {
            // 调用删除接口
            delAuth({
              id: row.id
            }).then(res => {
              if( res.status === 200) {
                that.$message({
                  type: 'success',
                  message: '操作成功!'
                })
                // 刷新列表
                that.search()
              }else{
                that.$message.error(res.info)
              }
            })
          }).catch(() => {
          })
        }
      },
    }

  }
</script>
